<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <el-input
          size="mini"
          style="width: 200px; margin-right :10px; font-size:13px; "
          v-model="params.name"
          placeholder="请输入姓名查询"
      ></el-input>
      <el-button size="mini" type="info" @click="findBySearch()" plain>查询</el-button>
      <el-button size="mini" type="warning" @click="reset()" plain>重置</el-button>
    </div>

    <!-- 添加-删除 -->
    <div class="search" style="margin-top: 10px;">
      <el-button size="mini" type="primary" @click="add()" plain>新增</el-button>
      <el-button size="mini" type="danger" @click="BatchDelete()" plain>批量删除</el-button>
    </div>

    <!-- 表格 -->
    <div class="search" style="margin-top: 10px; font-size:12px;">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="headPhoto" label="头像" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image
                style="width: 50px ; height: 50px; border-radius: 50%"
                :src="scope.row.headPhoto"
                :preview-src-list="[scope.row.headPhoto]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="username" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="intro" label="简介" show-overflow-tooltip></el-table-column>
        <el-table-column prop="fee" label="挂号费" show-overflow-tooltip></el-table-column>
        <el-table-column prop="role" label="角色" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="电话" show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column prop="departmentName" label="科室" show-overflow-tooltip></el-table-column>
<!--        <el-table-column prop="work" label="排班" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="workTime" label="入职时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  新增表单  -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="form.intro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" prop="fee">
          <el-input v-model="form.fee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="departments">
            <el-select style="width: 100%;" v-model="form.administrativeId" placeholder="请选择">
              <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.departmentName"
                  :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>
<!--        <el-form-item label="排班" prop="work">-->
<!--          <el-input v-model="form.work" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="入职时间" prop="workTime">
          <el-date-picker
              style="width: 100%;"
              v-model="form.workTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="form.position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="headPhoto">
          <el-upload
              class="upload-demo"
              :action="$baseUrl + '/file/upload'"
              :on-success="successUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <!--  编辑表单  -->
    <el-dialog title="新增" :visible.sync="dialogFormVisibleUpdate">
      <el-form :model="updateForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="updateForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="updateForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="updateForm.intro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" prop="fee">
          <el-input v-model="updateForm.fee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="updateForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="updateForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="departments">
          <el-select style="width: 100%;" v-model="updateForm.administrativeId" placeholder="请选择">
          <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.departmentName"
              :value="item.id">
          </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="排班" prop="work">-->
<!--          <el-input v-model="updateForm.work" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="入职时间" prop="workTime">
          <el-date-picker
              style="width: 100%;"
              v-model="updateForm.workTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="updateForm.position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="headPhoto">
          <el-upload
              class="upload-demo"
              :action="$baseUrl + '/file/upload'"
              :on-success="successUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="updateAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "DoctorView",
  data() {
    return {
      form: {},//新增表单
      dialogFormVisible: false, //新增表单，默认不显示
      formLabelWidth: '100px', //表单内每行的宽度
      updateForm: {}, //编辑表单
      dialogFormVisibleUpdate: false, //编辑表单，默认不显示
      ruleForm: {},
      //表单校验
      params: {
        name: "",
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      tableData: [],
      multipleSelection: [], //批量删除
      departments:[], //科室
      value : '' , //科室的选择框


    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();

  },
  mounted() {
    this.findDepartments();
  },
  methods: {
    // 条件查询
    findBySearch() {
      request.get("/doctor/findBySearch", {params: this.params}).then(res => {
        if (res.data && res.data.list){
          this.tableData = res.data.list;
          this.total = res.data.total;
        }else {
          this.$message.error(res.msg);
        }
      }).catch(error => {
        console.error("Error occurred while fetching data:", error);
      });
    },

    //查询科室
    findDepartments(){
      request.get("/Administrative/getAll").then(res => {
        if (res.data){
          console.log(res)
          this.departments = res.data;
          console.log(this.departments)
          // 为每个科室对象添加一个名称属性
          this.departments.forEach(department => {
            department.name = department.departmentName;
          });
          console.log(this.departments)
        }else {
          this.$message.error(res.msg);
        }
      }).catch(error => {
        console.error("Error occurred while fetching data:", error);
      });
    },

    //重置
    reset() {
      this.params.name = "";
      this.findBySearch()
    },

    //新增按钮
    add() {
      //弹出新增表单
      this.dialogFormVisible = true;
    },

    //新增表单文件上传
    successUpload(res) {
      this.updateForm.headPhoto = res.data;
    },

    //发起新增请求
    addAdmin() {
      console.log(this.form)
      request.post("/doctor/add", this.form).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            message: "添加成功!",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.findBySearch();
          //将表单内容清空
          this.form = {};
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      })
    },

    //编辑按钮
    handleEdit(index, row) {
      this.dialogFormVisibleUpdate = true;
      request.get("/doctor/findByAccount", {params: {account: row.account}}).then(res => {
        this.updateForm = res.data;
        console.log(this.updateForm)
      })
      console.log(index, row)
    },

    //编辑表单文件上传
    updateUpload(res) {
      this.updateForm.headPhoto = res.data;
    },

    //编辑表单请求
    updateAdmin() {
      console.log(this.updateForm)
      console.log(this.departments)
      request.post("/doctor/update", this.updateForm).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功!",
            type: "success"
          });
          this.dialogFormVisibleUpdate = false;
          this.findBySearch();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      })
    },

    //删除
    handleDelete(index, row) {
      //提示是否删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            request.get("/doctor/delete", {params: {account: row.account}}).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功!",
                  type: "success"
                });
                this.findBySearch();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            })
          }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },

    //存放选中的数据，要批量删除的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },

    //批量删除请求
    BatchDelete() {
      console.log(this.multipleSelection)
      //提示是否删除
      this.$confirm("确定批量删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            if (this.multipleSelection.length == 0){
              this.$message.warning("请选择要删除的数据!")
              return;
            }
            request.post("/doctor/batchDelete", this.multipleSelection).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "批量删除成功!",
                  type: "success"
                });
                this.findBySearch();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消批量删除"
            });
          });
    },


    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },


  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
